<template>
	<view class="memberBox">
		<u-popup v-model="visible" mode="center" :closeable="true">
			<view class="formBox">
				<view class="list">
					<view class="">姓名：</view>
					<input type="text" v-model="model.nameTakingMeal">
				</view>
				<view class="list">
					<view class="">手机号：</view>
					<input type="text" v-model="model.phoneTakingMeals">
				</view>
				<view class="button" @click="submit">提交</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		addCompanyMember,
		editCompanyMember
	} from '@/utils/req/api.js';
	import {
		telReg
	} from '@/utils/regular.js'
	export default {
		data() {
			return {
				visible: false,
				type: 'add',
				model: {}
			}
		},
		methods: {
			show(type, record) {
				this.type = type
				console.log('this.type', this.type);
				this.visible = true;
				if (type == 'edit') {
					this.model = JSON.parse(JSON.stringify(record));
				}
			},
			async submit() {
				let {
					nameTakingMeal,
					phoneTakingMeals
				} = this.model;
				if (!nameTakingMeal) {
					this.$showToast.call(this, '请填写姓名', 'default', 4000)
					return;
				}
				if (!phoneTakingMeals) {
					this.$showToast.call(this, '请填写手机号码', 'default', 4000)
					return;
				}
				if (!telReg.test(phoneTakingMeals)) {
					this.$showToast.call(this, '请填写正确的手机号码', 'default', 4000)
					return;
				}
				let params = Object.assign({}, this.model);
				params.companyId = uni.getStorageSync('companyId')
				let res;
				if (this.type == 'add') {
					res = await addCompanyMember(params);
				} else {
					res = await editCompanyMember(params);
				}
				if (res.data.success) {
					this.visible = false;
					this.$showToast.call(this, this.type == 'add' ? "新增成功" : '编辑成功', 'default', 4000)
					this.model = {};
					this.$emit('loadData');
				} else {
					this.$showToast.call(this, res.data.message, 'fail', 4000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.memberBox {
		width: 100%;
	}

	.formBox {
		padding: 100rpx 40rpx;

		.list {
			@include flexs(center, center);
			margin: 20rpx 0;

			view {
				font-size: 30rpx;
				text-align: right;
				width: 150rpx;
				font-weight: bold;
				color: #000;
			}

			input {
				flex: 1;
				margin-left: 20rpx;
				border-radius: 10rpx;
				border: 1px solid #eee;
				font-size: 30rpx;
				line-height: 2;
				padding: 10rpx 0 10rpx 20rpx;
				height: auto !important;
			}
		}
	}

	.button {
		width: calc(100% - 40rpx);
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #fa690a;
		line-height: 2;
		text-align: center;
		padding: 10rpx 0;
		margin: 80rpx auto 0 auto;
	}

	.memberBox {
		/deep/.u-mode-center-box {
			border-radius: 10rpx !important;
			overflow: hidden;
		}

		/deep/.u-drawer__scroll-view {
			width: 90vw;
			max-height: 50vh;
		}
	}
</style>